<template>
	<view class="form-container bg">
		<u-subsection
            :list="tabList"
            :current="activeTab"
            mode="subsection"
            activeColor="#5c6be3"
            fontSize="16"
			@change="onTabChange"
        ></u-subsection>
        <view v-if="activeTab === 1" class="margin-top-30">
            <jkFormCard title="报修信息">
                <jkFormItem label="故障时间" :show-right-icon="false">
                    <view>{{ ruleForm.faultTime || '' }}</view>
                </jkFormItem>
                <jk-form-item label="故障等级" :show-right-icon="false">
                    <view>{{ ruleForm.faultLevelName || '' }}</view>
                </jk-form-item>
                <jk-form-item label="故障分类" :show-right-icon="false">
                    <view>{{ ruleForm.faultTypeName || '' }}</view>
                </jk-form-item>
                <jk-form-item label="故障项目" :show-right-icon="false">
                    <view>{{ ruleForm.faultName || '' }}</view>
                </jk-form-item>
                <jk-form-item label="故障描述" label-position="top" :show-border-bottom="false">
                   <textarea
                       placeholder-class="color4"
                       class="disabled-textarea-style"
                       :cursor-spacing="100"
                       disabled
                       :adjust-position="true"
                       v-model="ruleForm.faultDescription"
                       placeholder=""
                   ></textarea>
                </jk-form-item>
                <jk-form-item label="指定维修人" :show-right-icon="false">
                    <view>{{ ruleForm.repairmanName || '' }}</view>
                </jk-form-item>
                <jk-form-item label="复机时间" :show-right-icon="false">
                    <view>{{ ruleForm.restartTime || '' }}</view>
                </jk-form-item>
            </jkFormCard>
        </view>
        <view v-else>
            <view class="margin-top-30">
                <jkFormCard title="基本信息">
                    <jkFormItem label="设备编号" :show-right-icon="false">
                        <view>{{ ruleForm.machineCode || '' }}</view>
                    </jkFormItem>
                    <jk-form-item label="所属工序" :show-right-icon="false">
                        <view>{{ ruleForm.processName || '' }}</view>
                    </jk-form-item>
                    <jk-form-item label="所属车间" :show-right-icon="false">
                        <view>{{ ruleForm.workshopName || '' }}</view>
                    </jk-form-item>
                </jkFormCard>
            </view>
            <view class="margin-top-30">
                <jkFormCard title="维修信息">
                    <jk-form-item label="开始时间" @click="onSelectTime('beginTime')" :value="ruleForm.beginTime" @clear="onClearBeginTime">
                        <view>{{ ruleForm.beginTime || '' }}</view>
                    </jk-form-item>
                    <jk-form-item label="结束时间" @click="onSelectTime('endTime')" :value="ruleForm.endTime" @clear="onClearEndTime">
                        <view>{{ ruleForm.endTime || '' }}</view>
                    </jk-form-item>
                    <jk-form-item label="维修耗时" :show-right-icon="false">
                        <view>{{ ruleForm.repairTimeConsuming || '' }}</view>
                    </jk-form-item>
                    <jk-form-item label="故障分类" @click="selectFaultTypePopupOptionState = true" :value="ruleForm.actualFaultTypeName" @clear="onClearOfSelectFaultType">
                        <view>{{ ruleForm.actualFaultTypeName || '' }}</view>
                    </jk-form-item>
                    <jk-form-item label="故障项目" @click="selectFaultItemPopupOptionState = true" :value="ruleForm.actualFaultName" @clear="onClearOfSelectFaultItem">
                        <view>{{ ruleForm.actualFaultName || '' }}</view>
                    </jk-form-item>
                    <jk-form-item label="故障原因" @click="selectCausePopupOptionState = true" :value="ruleForm.actualFaultCauseName" @clear="onClearOfSelectCause">
                        <view>{{ ruleForm.actualFaultCauseName || '' }}</view>
                    </jk-form-item>
                    <jk-form-item label="维修说明" label-position="top" :show-border-bottom="false">
                       <textarea
                           placeholder-class="color4"
                           class="textarea-style"
                           :cursor-spacing="100"
                           :adjust-position="true"
                           v-model="ruleForm.actualRepairDescription"
                           placeholder="请输入"
                       ></textarea>
                    </jk-form-item>
                </jkFormCard>
            </view>
        </view>
		<view class="fixed-footer">
			<u-button
                @click="onConfirmBtn"
                color="#2d8cf0"
                :loading="confirmLoading"
                iconColor="#fff"
				size="large"
            >完成维修</u-button>
		</view>

		<u-datetime-picker
            v-model="defaultTime"
            :show="selectDateTimePickerState"
            :closeOnClickOverlay="true"
			@close="selectDateTimePickerState = false"
            @cancel="selectDateTimePickerState = false"
            @confirm="onConfirmBtnOfSelectPicker"
			mode="datetime"
        ></u-datetime-picker>
        <jkPopupOption
            :show="selectCausePopupOptionState"
            :optionList="faultCauseList"
            @visible-change="(e) => selectCausePopupOptionState = e"
            @confirm="onConfirmOfSelectCause"
        ></jkPopupOption>
        <jkPopupOption
            :show="selectFaultTypePopupOptionState"
            :optionList="faultTypeList"
            @visible-change="(e) => selectFaultTypePopupOptionState = e"
            @confirm="onConfirmOfSelectFaultType"
        ></jkPopupOption>
        <jkPopupOption
            :show="selectFaultItemPopupOptionState"
            :optionList="faultItemList"
            @visible-change="(e) => selectFaultItemPopupOptionState = e"
            @confirm="onConfirmOfSelectFaultItem"
        ></jkPopupOption>
	</view>
</template>

<script>
    import {
        spinFaultCausePage, machineManagerRepairOrderGet, spinFaultTypePage, spinFaultPage, machineManagerRepairOrderComplete
    } from "../../../../api";
    import {
        formatTime, getDiffHours,
        showLoading,
        tipBar
    } from "../../../../utils/jk-utils";
	import jkPopup from '../../../../jk-components/jk-popup';
    import jkFormCard from "../../../../jk-components/jk-from-card";
    import jkFormItem from "../../../../jk-components/jk-from-item";
    import jkPopupOption from '../../../../jk-components/jk-popup-option/index';
	export default {
		components: {
            jkPopupOption,
            jkFormCard,
            jkFormItem,
			jkPopup
		},
		data() {
			return {
                selectFaultItemPopupOptionState: false,
                selectFaultTypePopupOptionState: false,
                faultTypeList: [],
                selectCausePopupOptionState: false,
				repairState: 0,
				defaultTime: '',
				selectDateTimePickerState: false,
				activeTab: 0,
				tabList: ['维修信息', '报修信息'],
				faultCauseList: [],
                faultItemList: [],
				confirmLoading: false,
				dataId: null,
				ruleForm: {
                    'beginTime': '',
                    'callId': null,
                    'callName': '',
                    'callTime': '',
                    'endTime': '',
                    'faultCauseCode': '',
                    'faultCauseId': null,
                    'faultCauseName': '',
                    'faultCode': '',
                    'faultDescription': '',
                    'faultId': null,
                    'faultLevelId': null,
                    'faultLevelName': '',
                    'faultName': '',
                    'faultTypeCode': '',
                    'faultTypeId': null,
                    'faultTypeName': '',
                    'ifReplace': true,
                    'ifShutdown': true,
                    'machineCode': '',
                    'machineId': null,
                    'machineName': '',
                    'processCode': '',
                    'processId': null,
                    'processName': '',
                    'repairDescription': '',
                    'repairmanId': null,
                    'repairmanName': '',
                    'repairmanTime': '',
                    'restartTime': '',
                    'workshopCode': '',
                    'workshopId': null,
                    'workshopName': '',
                    'faultTime': '',
                    // 完成维修的信息
                    'actualFaultCauseCode': '',
                    'actualFaultCauseId': null,
                    'actualFaultCauseName': '',
                    'actualFaultCode': '',
                    'actualFaultDescription': '',
                    'actualFaultId': null,
                    'actualFaultName': '',
                    'actualFaultTypeCode': '',
                    'actualFaultTypeId': null,
                    'actualFaultTypeName': '',
                    'actualRepairDescription': '',
                    'actualRepairmanId': null,
                    'actualRepairmanName': '',
                    'id': null,
                    'repairTimeConsuming': null
                },
				rules: {},
                timeType: null
			}
		},
		onLoad(payload) {
			this.dataId = JSON.parse(payload.id);
			this.repairState = Number(payload.repairState);
			let title = this.repairState === 0 ? '接单' : '完成维修';
			wx.setNavigationBarTitle({
				title
			})
		},
		methods: {
		    onClearBeginTime() {
                this.ruleForm.beginTime = '';
                this.ruleForm.repairTimeConsuming = ''
            },
            onClearEndTime() {
                this.ruleForm.endTime = '';
                this.ruleForm.repairTimeConsuming = ''
            },
            setFaultItemVal(item) {
                this.$set(this.ruleForm, 'actualFaultId', item.id);
                this.$set(this.ruleForm, 'actualFaultCode', item.code);
                this.$set(this.ruleForm, 'actualFaultName', item.name);
                this.selectFaultItemPopupOptionState = false;
            },
            onClearOfSelectFaultItem() {
                this.setFaultItemVal({});
            },
            onConfirmOfSelectFaultItem(e, item) {
                this.setFaultItemVal(item);
            },
            setFaultTypeVal(item) {
                this.$set(this.ruleForm, 'actualFaultTypeId', item.id);
                this.$set(this.ruleForm, 'actualFaultTypeCode', item.code);
                this.$set(this.ruleForm, 'actualFaultTypeName', item.name);

                this.$set(this.ruleForm, 'actualFaultId', null);
                this.$set(this.ruleForm, 'actualFaultCode', '');
                this.$set(this.ruleForm, 'actualFaultName', '');
                this.$set(this.ruleForm, 'actualFaultCauseId', null);
                this.$set(this.ruleForm, 'actualFaultCauseCode', '');
                this.$set(this.ruleForm, 'actualFaultCauseName', '');
                this.faultItemList = [];
                this.faultCauseList = [];
                this.selectFaultTypePopupOptionState = false;
                this.getFaultItemListRequest();
                this.getFaultCauseListRequest();
            },
            onClearOfSelectFaultType() {
                this.setFaultTypeVal({});
            },
            onConfirmOfSelectFaultType(e, item) {
                this.setFaultTypeVal(item);
            },
            setCauseVal(item) {
                this.$set(this.ruleForm, 'actualFaultCauseId', item.id);
                this.$set(this.ruleForm, 'actualFaultCauseCode', item.code);
                this.$set(this.ruleForm, 'actualFaultCauseName', item.name);
                this.selectCausePopupOptionState = false;
            },
            onClearOfSelectCause() {
                this.setCauseVal({});
            },
            onConfirmOfSelectCause(e, item) {
                this.setCauseVal(item);
            },
            onCalHour(e, type) {
                if (this.ruleForm.endTime && this.ruleForm.beginTime) {
                    if (this.ruleForm.endTime > this.ruleForm.beginTime) {
                        this.$set(this.ruleForm, 'repairTimeConsuming', getDiffHours(this.ruleForm.beginTime, this.ruleForm.endTime));
                    } else {
                        this.$set(this.ruleForm, type, null);
                        uni.showToast({
                            title: '起始时间有误',
                            icon: 'error'
                        });
                    }
                } else {
                    this.$set(this.ruleForm, 'repairTimeConsuming', null);
                }
            },
            onSelectTime(type) {
                this.timeType = type;
                this.selectDateTimePickerState = true;
            },
			onConfirmBtnOfSelectPicker(e) {
				if (this.timeType === 'beginTime') {
					this.$set(this.ruleForm, 'beginTime', formatTime(e.value));
				} else {
					this.$set(this.ruleForm, 'endTime', formatTime(e.value));
				}
                this.onCalHour(formatTime(e.value), this.timeType);
                this.selectDateTimePickerState = false;
			},
			onTabChange(e) {
				this.activeTab = e;
			},
			onConfirmBtn() {
				this.confirmLoading = true;
				let params = JSON.parse(JSON.stringify(this.ruleForm));
                machineManagerRepairOrderComplete(params).then(res => {
					this.confirmLoading = false;
					if (res.data.status === 200) {
						uni.navigateBack({
							delta: 1
						});
						tipBar('save');
					}
				})
			},
			getFaultItemListRequest() {
				if (!this.ruleForm.actualFaultTypeId) return;
                return spinFaultPage({
					faultTypeId: this.ruleForm.actualFaultTypeId,
                    auditState: 1
				}).then(res => {
					if (res.data.status === 200) {
						this.faultItemList = res.data.res;
					}
				})
			},
            getFaultCauseListRequest() {
                if (!this.ruleForm.actualFaultTypeId) return;
                return spinFaultCausePage({
                    faultTypeId: this.ruleForm.actualFaultTypeId,
                    auditState: 1
                }).then(res => {
                    if (res.data.status === 200) {
                        this.faultCauseList = res.data.res;
                    }
                })
            },
            getFaultTypeListRequest() {
                return spinFaultTypePage({
                    auditState: 1
                }).then(res => {
                    if (res.data.status === 200) {
                        this.faultTypeList = res.data.res;
                    }
                })
            },
			getDetailRequest() {
				return machineManagerRepairOrderGet({
					"id": this.dataId
				}).then(res => {
					if (res.data.status === 200) {
						this.ruleForm = res.data.res;
						this.$set(this.ruleForm, 'endTime', formatTime(Date.now()));
						this.onCalHour(this.ruleForm.endTime, 'endTime');
						this.getFaultCauseListRequest();
					}
				})
			},
			async getDependentData() {
				showLoading(true);
				await this.getFaultTypeListRequest();
				if (this.dataId) await this.getDetailRequest();
				showLoading(false);
			}
		},
        onShow() {
            this.defaultTime = formatTime(Date.now());
            this.getDependentData();
        }
	}
</script>

<style lang="scss" scoped>
	.popup-content-box {
		padding: 32rpx;
		.popup-content-box-title {
			font-size: 34rpx;
			text-align: center;
			margin-bottom: 20rpx;
		}
	}
</style>
